<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <input type="text">
  <span style="display: none;">手机号格式错误</span>
  <script>
    // 用户在前端页面做的动作就是事件
    // 页面通过事件处理函数来对用户进行反馈

    // 事件处理函数都可以直接使用一个参数event，表示的是事件对象。
    // document.querySelector("div").onclick = (e) => {
    //   console.log("div click");
    //   console.log(e);
    // }

    // 事件监听
    // document.querySelector("div").addEventListener("click", (e) => {
    //   console.log("div click2");
    //   console.log(e);
    // })
    // window.addEventListener("scroll", (e) => {
    //   // console.log("div click2");
    //   console.log(e.target.scrollTop);
    //   // console.log(window.screenY);
    // })

    // document.querySelector("input").addEventListener("keydown", (e) => {
    //   console.log(e.key);
    //   if (e.key === "Enter") {
    //     console.log("123");
    //   }
    // })

    // const reg5 = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
    // document.querySelector("input").addEventListener("input", (e) => {
    //   if (reg5.test(e.target.value)) {
    //     document.querySelector("span").style.display = "none"
    //   } else {
    //     document.querySelector("span").style.display = "inline"
    //   }
    // })

    // window.onload = () => {
    //   console.log("页面加载完成了");
    // }

    /*
      常见的事件类型
        1. 鼠标事件
          onclick: 鼠标单击
          onmousedown: 鼠标按下事件
          onmouseup: 鼠标抬起事件
          onmousemove: 鼠标移动事件
          onmouseover: 鼠标进入事件
          onmouseout: 鼠标离开事件
          wheel: 滚轮事件
          onscroll: 滚动条事件

        2. 键盘事件
          onkeydown: 键盘的按下事件
          onkeyup: 键盘的抬起事件
          onkeypress: 按下并抬起


        3. 表单事件
          onchange: 内容改变并且失去焦点会触发事件
          oninput: 内容改变事件
          onfocus: input获得焦点事件
          onblur: input失去焦点事件
          onsubmit: 表单提交事件


        4. 其他事件
          onload: 页面加载完成事件
          onresize: 浏览器大小改变时触发
          oncontextmenu: 鼠标右键

        5. 手机端事件
          touchstart: 触摸开始
          touchend: 触摸结束
          touchmove: 触摸后移动
    */
  </script>
</body>
</html>